<template>
  <div class="nav-head">
    <NavigationHead></NavigationHead>
    <!-- <router-view :orders="orders" @delOrder="delOrder"></router-view> -->
    <div
      class="star-box"
      style="width: 800px"
      v-for="item in orders"
      :key="item.id"
    >
      <!-- <p>1</p> -->
      <router-link :to="'/info?goodId=' + item.id">
        <GoodItem
          :id="item.id"
          :image="item.image"
          :name="item.name"
          :price="item.price"
          :rand="item.rand"
          :sales="item.sales"
          :store="item.store"
          :isNewCus="item.isNewCus"
          :sort="item.sort"
        >
          <template>
            <p>收件人：{{ item.consignee }}</p>
            <p>
              地址:{{ item.provinceName }} {{ item.cityName }}
              {{ item.districtName }} {{ item.detail }}
            </p>
            <p>已选购{{ item.number }}件</p>
            <p>{{ item.status === 1 ? '未支付' : '已支付' }}</p>
          </template>
        </GoodItem>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getUserAllOrder } from '@/api/order'
import GoodItem from '@/components/goods/GoodItem.vue'
import NavigationHead from '@/components/navigation/NavigationHead.vue'
export default {
  components: {
    NavigationHead,
    GoodItem
  },
  data() {
    return {
      orders: [
        { id: 1, good: 1, num: 1, price: 1, state: 'unpaid' },
        { id: 2, good: 1, num: 1, price: 1, state: 'undelivered' },
        { id: 3, good: 1, num: 1, price: 1, state: 'aftersale' }
      ]
    }
  },

  created() {
    this.init()
  },
  methods: {
    delOrder(index) {
      this.orders.pop(index)
    },
    async init() {
      const user = JSON.parse(sessionStorage.getItem('user'))
      // console.log(parseInt(user))
      await getUserAllOrder({ userId: user }).then((res) => {
        // if()
        // console.log(document.location.hash)
        const str = document.location.hash.substring(10)
        let ssss = 1
        if (str === 'unpaid') ssss = 1
        else ssss = 4
        // console.log()
        this.orders = res.data.data.filter((order) => {
          if (str === 'all') return true
          return order.status === ssss
          // return true
        })
        console.log(this.orders)
      })
    }
  }
}
</script>

<style lang="less">
.nav-head {
  display: block;
  width: 80%;
  margin-left: 50px;
  margin-top: 20px;
  position: relative;
  left: 256px;
  top: 10px;
}
</style>
